<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="../css/article.css" rel="stylesheet" type="text/css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/jsonData.js"></script>
    <title>显示文章</title>
</head>
<body  class="/aritcle/getAllArticle">
    <!--<form id="query" name="query" method="get" >-->
    搜索框：<input id="condition" type="text" placeholder="输入回车搜索" onkeydown="summit()"/>
     <select  id="field" onchange="this.parentNode.nextSibling.value=this.value">
         <option value="ARTICLE_ID">文章序号</option>
         <option value="TITLE">标题</option>
         <option value="PULISH_DATE">出版时间</option>
         <option value="ARTICLE_TYPE">文章类型</option>
         <option value="AUTHOR_NAME">作者名字</option>
         <option value="SOURCE_NAME">来源放</option>
     </select>
    <!--</form>-->
    <br/><br/>
    <div id="dataTable"  >

    </div>
    <button id="page" type="button"  onclick="pages()">分页</button>
    <button id="pre" type="button" onclick="pre()">上一页</button>
    <button id="next" type="button" onclick="next()">下一页</button>
</body>
<script>
    function summit()
    {
        if(event.keyCode==13)
        {
            var field=$("#field").val();
            var condition=$("#condition").val();
            $.ajax(
                    {
                        url:"/aritcle/queryCondition",
                        type:"get",
                        dataType:'json',
                        data:{"field":field,"condition":condition},
                        success: function (data) {
                            console.log(data);
                            createShowingTable(data);
                           // refresh_date.onload;
                        },
                        error: function () {
                            alert("选择条件查询有误")
                        }
                    }
            );
        }
    }
    var currentPage=1;
    var rowNum=4;
    var start=1;//首页为1
    var end=currentPage<<2;
    var total=0;
    var totalPage=0;
    /**分页显示*/
    function pages()
    {
        $.ajax(
                {
                    url:"/aritcle/getCount",
                    type:"get",
                    success: function (data) {
                        currentPage=1;
                        start=1;//首页为1
                        end=currentPage<<2;
                        total=data;
                        totalPage=total>>2;
                        if(end>data)
                        {
                            end=data;
                        }
                        displayPage(start,end);
                    },
                    error: function () {
                        alert("选择条件查询有误")
                    }
                }
        );
    }
    //分页显示上一页
    function pre()
    {
        if(currentPage==1)
        {
            start=1;
            end=currentPage<<2;
        }
        else
        {
            end=start-1;
            start=start-rowNum;
            if(start<1)
            {
                start=1;
            }
            currentPage--;
        }
        console.log("end:"+end+"  start:"+start+"   currentPage:"+currentPage);
        displayPage(start,end);
    }
    var isLast=false;
    //分页显示下一页
    function next()
    {
        currentPage++;
        if(currentPage>totalPage)
        {
            if(!isLast)
            {
                start=end+1;
                isLast=true;
            }
            currentPage=totalPage;
            end=total;
        }
        else
        {
            start=end+1;
            end=(currentPage<<2);
        }
        console.log("end:"+end+"  start:"+start);
        displayPage(start,end);
    }
    function displayPage(start,end)
    {
        $.ajax(
                {
                    url:"/aritcle/page",
                    type:"get",
                    dataType:'json',
                    data:{"start":start,"end":end},
                    success: function (data) {
                        console.log(data);
                        createShowingTable(data);
                        // refresh_date.onload;
                    },
                    error: function () {
                        alert("选择条件查询有误")
                    }
                }
        )
    }
</script>
</html>